<template>
  <div
    class="MoveFile"
    v-if="ispage"
  >
    <cover-into @coverClcik='hideComponents'></cover-into>
    <div class="mf-window">
      <div class="mf-wd-top">
        <p class="mf-wd-top_p">移动到</p>
        <i
          class="iconfont icon-guanbi"
          @click="hideComponents"
        ></i>
      </div>
      <div v-loading="scrollLoading">
        <div class="mf-quan_bu_folder">
          <wdw-item
            :wdwList='staticstateWidlist'
            @frozenClick='onfrozenClick'
          ></wdw-item>
        </div>
        <div class="mf-window-in custom-scroll">
          <!-- <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree> -->
          <wdw-item
            :wdwList='widlist'
            @addupload='onaddupload'
          ></wdw-item>
        </div>
      </div>
      <div class="mf-wd-bommon">
        <el-button
          type="primary"
          plain
          icon="el-icon-folder-add"
          size="medium"
          @click="newupload"
        >新建文件夹</el-button>
        <div class="mf-wd-bommon_right">
          <el-button
            type="primary"
            size="medium"
            @click="movebut"
          >确认</el-button>
          <el-button
            plain
            size="medium"
          >取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CoverInto from '../CoverInto.vue'
import WdwItem from './Wdw-Item.vue'
import emiton from '@/common/emit/emiton'
import MoveFileMixins from '@/mixins/MoveFile-mixins'
let wdwItemClick = null
export default {
  name: 'MoveFile',
  props: {
    procheckBoxList: {
      type: Array,
      default() {
        return []
      },
    },
  },
  components: {
    CoverInto,
    WdwItem,
  },
  mixins: [MoveFileMixins],
  data() {
    return {
      ispage: false,
      widlist: [],
      scrollLoading: false,
      staticstateWidlist: [
        {
          isClass: true,
          isItemBack: false,
          id: 0,
          title: '全部文件',
          son: 1,
        },
      ],
    }
  },
  created() {
    // this.widlist = list
    this.getfolder()
    // 监听wdwItem 递归数据
    emiton.$on('wdwItem', data => {
      wdwItemClick = data
      this.factoryArr(this.widlist)
      this.staticstateWidlist[0].isItemBack = false
    })
    /*  emiton.$on('getfolderList', () => {
      this.getfolder()
    }) */
    emiton.$on('folderadd', () => {
      this.forArrayUpdate(this.widlist)
    })
  },
  methods: {
    // 点击全部文件
    onfrozenClick(val) {
      if (val) {
        wdwItemClick = undefined
        this.scrollhide = val
        this.factoryArr(this.widlist)
      } else {
        this.scrollhide = val
      }
    },
    // 获取所有顶级文件夹
    async getfolder() {
      const request = await this.$http.host.get('/moveFile')
      console.log(request)
      this.widlist = this.forAddKey(request.data)
    },
    // 关闭
    hideComponents() {
      this.ispage = !this.ispage
    },
    // 递归 全部的文件夹点击为false
    factoryArr(arr) {
      for (let index = 0; index < arr.length; index++) {
        arr[index].isItemBack = false
        if (arr[index].children) {
          this.factoryArr(arr[index].children)
        }
      }
    },
    // 新建文件夹
    newupload() {
      const date = Math.ceil(new Date().getTime() / 1000)
      const upload = {
        isupload: true,
        id: (date / 1000).toFixed(),
        establish_date: date,
        icon: 0,
        parent_file_id: (wdwItemClick && wdwItemClick.id) || 0,
        title: '',
        update_date: date,
        userid: this.$store.state.userinfo.id,
      }
      if (wdwItemClick) {
        this.forListAdd(this.widlist, upload)
      } else {
        this.widlist.push(upload)
      }
    },
    // 递归增加一个文件夹对象  用于新建文件夹
    forListAdd(arr, obj) {
      for (let index = 0; index < arr.length; index++) {
        if (arr[index].id == wdwItemClick.id) {
          arr[index].isClass = true
          arr[index].children.push(obj)
          return
        } else if (arr[index].children.length > 0) {
          this.forListAdd(arr[index].children, obj)
        }
      }
    },
    // 加载
    onaddupload(val) {
      this.scrollLoading = val
    },
    // 递归修改文件夹有子文件
    forArrayUpdate(arr) {
      for (let index = 0; index < arr.length; index++) {
        if (arr[index].id == wdwItemClick.id) {
          arr[index].son = 1
          arr[index].isItemBack = false
          return
        } else if (arr[index].children) {
          this.forArrayUpdate(arr[index].children)
        }
      }
    },
    // 确认按钮
    async movebut() {
      if (!wdwItemClick) {
        this.$message.warning('请选择文件夹！')
        return
      }
      this.scrollLoading = true
      try {
        const request = await this.$http.host.post('/Upload/move/file', {
          parent: wdwItemClick,
          sonupload: this.procheckBoxList,
        })
        if (request.code == 200) {
          this.ispage = false
          this.$emit('movesuccess')
        }
      } catch (error) {
        console.log('移动文件错误', error)
        this.$messgae.error('移动文件失败')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.icon-symbol {
  width: 2em;
  height: 2em;
  vertical-align: 0;
  fill: currentColor;
  overflow: hidden;
  margin-left: 10px;
}

.MoveFile {
  position: fixed;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  inset: 0 0 0 0;
  @include dif-jucc-alc;

  .mf-window {
    position: relative;
    width: 600px;
    height: 400px;
    background-color: #fff;
    border-radius: 10px;

    .mf-wd-top {
      width: 94%;
      height: 45px;
      border-bottom: 1px solid #f2f2f2;
      padding: 0 3%;
      @include dif-juspb-alic;

      .mf-wd-top_p {
        font-size: 16px;
        height: 45px;
        line-height: 45px;
        color: $textColor;
      }

      .icon-guanbi {
        color: #999;
      }
    }

    .mf-quan_bu_folder {
      width: 100%;
      margin: 0 auto;
      height: 40px;
      margin-top: 10px;
    }

    .mf-window-in {
      border: 1px solid #f2f2f2;
      border-top: none;
      width: 95%;
      margin: 0 auto;
      // margin-top: 10px;
      height: 250px;
      // transition: all 300ms linear;
    }

    .custom-scroll::-webkit-scrollbar {
      background-color: rgb(243, 243, 243);
    }

    .mf-wd-bommon {
      position: absolute;
      bottom: 10px;
      @include dif-juspb-alic;
      width: 95%;
      left: 2.5%;
    }
  }
}
.mf-window-in ::v-deep .el-loading-mask {
  height: 100%;
}
</style>